<template>
  <div>
    <el-card class="biaodan">表单</el-card>
    <el-card class="vuex">
      vuex
      <br />
      <div>{{$store.state.num}}</div>
      <el-button type="primary" @click="setNum">修改num值</el-button>
      <div>{{name}}</div>
      <div>{{token}}</div>
      <div>{{newName}}</div>
      <div>{{newToken}}</div>
      <div>{{fnName}}</div>
    </el-card>
  </div>

</template>

<script>
// eslint-disable-next-line no-unused-vars
import $store from '@/store/index'
import { mapState, mapGetters } from 'vuex' // 从vuex中导入mapState
export default {
  name: 'biaodan_list.vue',
  data() {
    return {}
  },
  mounted() {
    console.log(this.name)
    console.log(this.fnName)
  },
  computed: {
    ...mapState(['name', 'token']), // 直接取值 -数组写法
    ...mapState({ newName: 'name', newToken: 'token' }), // 取别名 -对象写法
    ...mapGetters(['fnNum1', 'fnName'])
  },
  methods: {
    setNum() {
      this.$store.commit('setNum', 1)
    }
  }
}
</script>

<style scoped lang="less">
.biaodan {
  width: 100%;
  height: 300px;
  margin-bottom: 10px;
}
.vuex {
  width: 100%;
  height: 300px;
  margin-bottom: 10px;
}
</style>
